<template>
  <div class="password">
    <span class="goback" @click="goback">&lt;</span>
    <div class="content">
      <p class="title">找回密码</p>
      <p class="title2">输入<i>{{ props.userdata }}</i>收到的6位验证码</p>
      <form class="yzm">
        <input type="password" placeholder="输入邮箱验证码" autocomplete="off" v-model="code">
        <div class="huoYzm" @click="yzm">获取验证码</div>
      </form>
      <form>
        <input type="password" placeholder="输入新密码" class="mima" autocomplete="off" v-model="password">
      </form>
      <div class="dui" @click="Findpass"><span>√</span></div>
    </div>
  </div>
  <Async_message_part :flag="passwordFlag" :title="passwordTitle" />
</template>

<script setup>
import { postFindpasswordAPI } from '../api/Findpassword-page';
import { ref, defineAsyncComponent } from 'vue'
const Async_message_part = defineAsyncComponent(() => import('../components/common/message-part.vue'))

const props = defineProps({
  userdata: {
    type: String
  }
});

const emit = defineEmits(['yzm'])

const password = ref('')
const code = ref('')
const passwordFlag = ref(false)
const passwordTitle = ref('')

// 登录
async function Findpass() {
  if (password.value.length >= 6) {
    const result = await postFindpasswordAPI(
      {
        'code': code.value,
        "email": props.userdata,
        "password": password.value
      }
    )
    console.log(result);
    // 状态码
    let status = result.status
    if (status === 200) {
      document.querySelector('.password').style.transform = 'translateX(100%)';
    }
  } else {
    Timeout('密码不能小于6位数!')
  }
}

// message简便方法
function Timeout(title) {
  passwordFlag.value = true
  passwordTitle.value = title
  setTimeout(() => {
    passwordFlag.value = false
    passwordTitle.value = ''
  }, 1000)
}

// 点击返回login页面
function goback() {
  document.querySelector('.password').style.transform = 'translateX(100%)';
}

// 子传父-验证码方法
const yzm = () => {
  emit('yzm')
}

</script>

<style lang="scss" scoped>
body,
html {
  height: 100%;
}

.password {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6b4bab), to(#bf09db));
  transform: translateX(100%);
  transition: all 1s;
  z-index: 20;

  /* 过渡效果，通过动画改变透明度 */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  animation: fadeIn 1s ease;

  /* 持续3秒，ease为默认的动画速度曲线 */
  .goback {
    color: #e8e8e9;
    font-size: 20px;
    margin-left: 20px;
  }

  .content {
    width: 273px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    margin-top: 240px;

    .title {
      font-size: 22px;
      margin-bottom: 15px;
      color: #74a9e3;
    }

    .title2 {
      font-size: 12px;
      margin-bottom: 10px;
      color: #74a9e3;

      i {
        color: #face15;
        // font-size: 11px;
      }
    }

    .yzm {
      height: 44px;
      width: 273px;
      display: flex;
      justify-content: space-between;
      background: rgba(238, 238, 238, 0.36);
      margin-top: 5px;

      input {
        height: 44px;
        background: rgba(255, 255, 255, 0.3);
        padding-left: 10px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        caret-color: #face15;
        width: 150px;
        outline: none;
        border: 0;

        &::placeholder {
          color: #9679a3;
          font-size: 16px;
        }
      }
    }

    .huoYzm {
      width: 108px;
      color: #fff;
      background: rgba(255, 255, 255, 0.5);
      outline: none;
      border: 0;
      font-size: 12px;
      line-height: 44px;
    text-align: center;
    }
  }

  .mima {
    margin-top: 10px;
    width: 263px;
    height: 44px;
    background: rgba(255, 255, 255, 0.3);
    padding-left: 10px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    caret-color: #face15;
    outline: none;
    border: 0;
    font-size: 16px;

    &::placeholder {
      color: #c28efd;
    }
  }

  .dui {
    margin-top: 50px;
    position: relative;
    width: 44px;
    height: 44px;
    background: #d297fd;
    border-radius: 50%;
    transform: rotate(5deg);


    span {
      position: absolute;
      left: 16px;
      top: 12px;
      color: rgba(148, 53, 162, 0.85);
      font-size: 20px;
    }
  }
}
</style>